<template>
    <div class="headBar">
      <ul>
        <li v-for="(item,index) in columns" :key="index" :style="{ width: item.width }">{{item.col}}</li>
      </ul>
    </div>
</template>
<script>
export default {
  props: {
    columns: {
      type: Array,
      default: []
    }
  }
}
</script>
<style lang="scss" scoped>

.headBar {
  line-height: 40px;
  border: 1px solid #e8e8e8;
  // padding: 0 20px;
  color: #3c3c3c;
  background-color: #fff;
  margin-bottom: -15px;
}
ul {
  font-size: 0;
  list-style: none;
  li {
    text-align: center;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
  }
}
</style> 